<template>
  <div class="wrap">
    <HeaderBar :has-logo="true" />
    <div class="back">
      <div class="circle" @click="back">
        <i class="el-icon-back" />
      </div>
      <div class="last-page-name">{{ getLastPageName }}</div>
    </div>
    <base-page v-bind="baseInfo">
      <template #searchBar>
        <filter-form
          ref="filterForm"
          :elements="getElements"
          :show-reset="true"
          @submit="submit"
        />
      </template>
      <template #content>
        <div class="table-box">
          <TableNew
            :loading="tableLoading"
            :data="tableData"
            :columns="getTableEl"
            :pagination="pagination"
            @paginationChange="paginationChange"
          >
            <template #num="scope">
              <span>{{ scope.row.num || scope.row.id }}</span>
            </template>
            <template #yard="scope">
              <div v-if="scope.row.yard === 1">三香</div>
              <div v-else-if="scope.row.yard === 2">浒关</div>
            </template>
            <template #action="scope">
              <el-tooltip v-if="scope.row.revokeFlag === 1" class="item" effect="dark" content="撤销" placement="top" :open-delay="600">
                <i class="el-icon-circle-close action red" @click="revoke(scope.row)" />
              </el-tooltip>
              <el-tooltip v-else class="item" effect="dark" content="撤销" placement="top" :open-delay="600">
                <i class="el-icon-circle-close no-perm" />
              </el-tooltip>
            </template>
          </TableNew>
        </div>
      </template>
    </base-page>
    <FooterBar />
  </div>
</template>

<script>
import baseFilterTable from '@/mixins/baseFilterTable'
import HeaderBar from '@/layout/HeaderBar.vue'
import FooterBar from '@/layout/FooterBar.vue'
import { getModifyRecordList, revokeRecord, meGetModifyRecordList, meRevokeRecord } from '@/api/collectionManage/businessExecute'

import {
  mbGetModifyRecordList,
  mbRevokeRecord,
  maGetModifyRecordList,
  maRevokeRecord,
  btGetRecordList,
  btRevokeRecord
} from '@/api/collectionManage/managerExecute'

import {
  listYsDepartment
} from '@/api/public.js'

export default {
  name: 'Dictionary', // 数据字典
  components: {
    HeaderBar,
    FooterBar
  },
  mixins: [baseFilterTable],
  props: {},
  data() {
    return {
      mode: '',
      baseInfo: {
        searchBarShow: true
      },
      tableData: [],
      tableEl: [
        {
          title: '用友编号',
          dataIndex: 'num',
          type: 'otherTag'
        },
        {
          title: '预算科目名称',
          dataIndex: 'subjectName'
        },
        {
          title: '预算科目编码',
          dataIndex: 'subjectCode'
        },
        {
          title: '科目编码',
          dataIndex: 'accountCode'
        },
        {
          title: '科目名称',
          dataIndex: 'accountName'
        },
        {
          title: '日期',
          dataIndex: 'dateTime'
        },
        {
          title: '凭证号',
          dataIndex: 'accountNum'
        },
        {
          title: '部门编码',
          dataIndex: 'deptCode'
        },
        {
          title: '部门名称',
          dataIndex: 'deptName'
        },
        {
          title: '摘要',
          dataIndex: 'description'
        },
        {
          title: '金额（元）',
          dataIndex: 'amount',
          align: 'right',
          format: true,
          width: 100
        },
        {
          title: '院区',
          dataIndex: 'yard',
          type: 'otherTag'
        },
        {
          title: '操作内容',
          dataIndex: 'operContent'
        },
        {
          title: '操作人',
          dataIndex: 'operPerson'
        },
        {
          title: '操作时间',
          dataIndex: 'operTime',
          width: 150
        },
        {
          title: '操作',
          dataIndex: 'action',
          type: 'otherTag',
          align: 'center'
        }
      ],
      tableElElse: [
        {
          title: '用友编号',
          dataIndex: 'num',
          type: 'otherTag'
        },
        {
          title: '预算科目名称',
          dataIndex: 'subjectName'
        },
        {
          title: '预算科目编码',
          dataIndex: 'subjectCode'
        },
        {
          title: '固定资产编码',
          dataIndex: 'assetNum'
        },
        {
          title: '固定资产名称',
          dataIndex: 'assetName'
        },
        {
          title: '日期',
          dataIndex: 'dateTime'
        },
        {
          title: '部门编码',
          dataIndex: 'deptCode'
        },
        {
          title: '部门名称',
          dataIndex: 'deptName'
        },
        {
          title: '原值',
          dataIndex: 'originalValue',
          align: 'right',
          format: true,
          width: 100
        },
        {
          title: '开始使用日期',
          dataIndex: 'useStartDate'
        },
        {
          title: '存放地点',
          dataIndex: 'site'
        },
        {
          title: '使用人',
          dataIndex: 'operator'
        },
        {
          title: '院区',
          dataIndex: 'yard',
          type: 'otherTag'
        },
        {
          title: '操作内容',
          dataIndex: 'operContent'
        },
        {
          title: '操作人',
          dataIndex: 'operPerson'
        },
        {
          title: '操作时间',
          dataIndex: 'operTime',
          width: 150
        },
        {
          title: '操作',
          dataIndex: 'action',
          type: 'otherTag',
          align: 'center'
        }
      ],
      tableElOther: [
        {
          title: '预算科目名称',
          dataIndex: 'subjectName'
        },
        {
          title: '预算科目编码',
          dataIndex: 'subjectCode'
        },
        {
          title: '部门编码',
          dataIndex: 'deptCode'
        },
        {
          title: '部门名称',
          dataIndex: 'deptName'
        },
        {
          title: '预算（%）',
          dataIndex: 'budgetRate',
          format: true,
          align: 'right'
        },
        {
          title: '执行（%）',
          dataIndex: 'columnF',
          type: 'hasMerge',
          mergeList: [
            {
              title: '三香（%）',
              dataIndex: 'sxImplementationRate',
              format: true,
              align: 'right'
            },
            {
              title: '浒关（%）',
              dataIndex: 'xgImplementationRate',
              format: true,
              align: 'right'
            },
            {
              title: '合计（%）',
              dataIndex: 'total',
              format: true,
              align: 'right'
            }
          ]
        },
        {
          title: '执行率/偏差率（%）',
          dataIndex: 'deviationRate',
          format: true,
          align: 'right'
        },
        {
          title: '数据月份',
          dataIndex: 'period'
        },
        {
          title: '操作内容',
          dataIndex: 'operContent'
        },
        {
          title: '操作人',
          dataIndex: 'operBy'
        },
        {
          title: '操作时间',
          dataIndex: 'operTime'
        },
        {
          title: '操作',
          dataIndex: 'action',
          type: 'otherTag',
          align: 'center'
        }
      ],
      elements: [
        {
          label: '时间',
          type: 'date-picker',
          mode: 'monthrange',
          key: 'time',
          value: [],
          format: 'yyyyMM',
          choiceDate: '',
          pickerOptions: this.$pickerOptions(),
          change: val => this.$pickerOptions(val => {
            if (!val) {
              const target = this.getElements.find(i => i.type === 'date-picker' && i.mode === 'monthrange')
              target.choiceDate = ''
            }
          })
        },
        {
          label: '院区',
          type: 'select',
          options: [
            {
              label: '三香',
              value: '1'
            },
            {
              label: '浒关',
              value: '2'
            }
          ],
          key: 'yard',
          value: ''
        },
        {
          label: '部门',
          type: 'select',
          options: [],
          key: 'deptName',
          value: ''
        },
        {
          label: '综合搜索',
          type: 'input',
          key: 'column',
          value: '',
          placeholder: '请输入预算科目名称/预算科目编码/科目名称/科目编码',
          width: 284
        },
        {
          label: '操作内容',
          type: 'select',
          options: [
            {
              label: '编辑',
              value: '编辑'
            },
            {
              label: '删除',
              value: '删除'
            }
          ],
          key: 'operContent',
          value: ''
        },
        {
          label: '用友编号',
          type: 'input',
          key: 'number',
          value: ''
        }
      ],
      elementsOther: [
        {
          label: '时间',
          type: 'date-picker',
          mode: 'monthrange',
          key: 'time',
          value: [],
          format: 'yyyyMM',
          choiceDate: '',
          pickerOptions: this.$pickerOptions(),
          change: this.$pickerOptions(val => {
            // if (!val) {
            //   const target = this.elementsOther.find(i => i.type === 'date-picker' && i.mode === 'monthrange')
            //   target.choiceDate = ''
            // }
          })
        },
        {
          label: '部门',
          type: 'select',
          options: [],
          key: 'dept',
          value: ''
        },
        {
          label: '综合搜索',
          type: 'input',
          key: 'input',
          value: '',
          placeholder: '请输入预算科目名称/预算科目编码/科目名称/科目编码',
          width: 284
        },
        {
          label: '操作内容',
          type: 'select',
          options: [],
          key: 'content',
          value: ''
        }
      ]
    }
  },
  computed: {
    getTableEl() {
      if (this.mode === '1' || this.mode === '2') {
        return this.tableEl
      } else if (this.mode === '3' || this.mode === '5') {
        return this.tableElElse
      } else {
        return this.tableElOther
      }
    },
    getElements() {
      if (this.mode !== '4') {
        return this.elements
      } else {
        return this.elementsOther
      }
    },
    getLastPageName() {
      switch (this.mode) {
        case '1':
          return '业务-预算执行管理 费用类'
        case '2':
          return '管理-预算执行管理 费用类'
        case '3':
          return '管理-预算执行管理 资产类'
        case '4':
          return '管理-预算执行管理 业务量配套指标'
        case '5':
          return '业务-预算执行管理 资产类'
        default:
          return ''
      }
    }
  },
  created() {
    this.mode = this.$route.query.mode
    this._listYsDepartment()
    this.initMonth()
  },
  mounted() {},
  methods: {
    async getData(val) {
      this.tableLoading = true
      const handles = {
        '1': getModifyRecordList,
        '2': mbGetModifyRecordList,
        '3': maGetModifyRecordList,
        '4': btGetRecordList,
        '5': meGetModifyRecordList
      }
      const params = {
        pageSize: this.pagination.pageSize,
        pageNum: this.pagination.current,
        startTime: val?.time?.length ? parseInt(val.time[0]) : '',
        endTime: val?.time?.length ? parseInt(val.time[1]) : '',
        yard: val?.yard,
        operConetent: val?.operConetent,
        number: val?.number,
        deptName: val?.deptName
      }
      try {
        const { data } = await handles[this.mode](params)
        if (data.code === 200) {
          this.tableData = data.data.list
          this.pagination.total = data.data.total
        }
      } catch (error) {
        console.log(error)
      } finally {
        this.tableLoading = false
        window.parent.postMessage('hideMask', '*')
      }
    },
    async _listYsDepartment() {
      try {
        console.log(this.mode)
        const { data } = await listYsDepartment({
          status: this.mode === '1' ? 1 : 0
        })
        if (data.code === 200 && data.data?.length) {
          this.elements.find(i => i.key === 'deptName').options.push(...data.data.map(j => ({ label: j.departmentName, value: j.departmentName })))
        } else {
          this.$message.error(data.message || '部门获取失败')
        }
      } catch (error) {
        console.log(error)
      }
    },
    initMonth() {
      const { startTime, endTime } = this.$getQuarter()
      this.elements.find(i => i.key === 'time').value.push(startTime, endTime)
      this.elementsOther.find(i => i.key === 'time').value.push(startTime, endTime)
    },
    back() {
      this.$route.params.mode = this.mode
      this.$router.back()
      // console.log('back')
      // window.parent.postMessage('close', '*')
    },
    async revoke(item) {
      if (this.mode === '1') {
        const params = {
          id: item.id,
          type: item.type,
          yard: item.yard
        }
        try {
          const { data } = await revokeRecord(params)
          if (data.code === 200) {
            this.$message.success(data.message || '操作成功')
            this.$refs.filterForm.submitFormFilter()
          } else {
            this.$message.error(data.message || '操作失败')
          }
        } catch (error) {
          console.log(error)
        }
      } else if (this.mode === '2') {
        const params = {
          id: item.id,
          type: item.type,
          yard: item.yard
        }
        try {
          const { data } = await mbRevokeRecord(params)
          if (data.code === 200) {
            this.$message.success(data.message || '操作成功')
            this.$refs.filterForm.submitFormFilter()
          } else {
            this.$message.error(data.message || '操作失败')
          }
        } catch (error) {
          console.log(error)
        }
      } else if (this.mode === '3') {
        const params = {
          id: item.id,
          type: item.type,
          yard: item.yard
        }
        try {
          const { data } = await maRevokeRecord(params)
          if (data.code === 200) {
            this.$message.success(data.message || '操作成功')
            this.$refs.filterForm.submitFormFilter()
          } else {
            this.$message.error(data.message || '操作失败')
          }
        } catch (error) {
          console.log(error)
        }
      } else if (this.mode === '4') {
        const params = {
          id: item.id
        }
        try {
          const { data } = await btRevokeRecord(params)
          if (data.code === 200) {
            this.$message.success(data.message || '操作成功')
            this.$refs.filterForm.submitFormFilter()
          } else {
            this.$message.error(data.message || '操作失败')
          }
        } catch (error) {
          console.log(error)
        }
      } else {
        const params = {
          id: item.id,
          type: item.type,
          yard: item.yard
        }
        try {
          const { data } = await meRevokeRecord(params)
          if (data.code === 200) {
            this.$message.success(data.message || '操作成功')
            this.$refs.filterForm.submitFormFilter()
          } else {
            this.$message.error(data.message || '操作失败')
          }
        } catch (error) {
          console.log(error)
        }
      }
    }
  }
}
</script>

<style lang="less" scoped>
.wrap{
  height: 100vh;
  width: 100vw;
  background-color: #f0f2f5;
}
:deep(.container-group) {
  height: calc(100% - 134px) !important;
}
.back{
  height: 44px;
  background-color: #fff;
  padding: 8px;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  .last-page-name {
    color: #888;
    margin-left: 16px;
  }
  .circle{
    height: 100%;
    width: 28px;
    border-radius: 50%;
    background-color: #2165f9;
    color: #fff;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }
}
.table-box{
  height: 100%;
  display: flex;
  flex-direction: column;
}
.red{
  color: #F56C6C;
}
</style>
